<template>
<!-- 选择场次 -->
  <view class="sku-pkg sku-choose-block" v-if="packageList && packageList.length > 0">
    <view class="sku-choose-block-title"><basic-icons name="icon-time" size="32rpx"  padding="0 6rpx 0 0"/>套餐</view>
    <view class="pkg-list">
      <view 
      v-for="(pkg, index) in packageList"
      :key="index"
      class="pkg-item"
      :class="{active: pkgIndex == index}"
      @click="clickPackage(index)" >{{pkg.name}}</view>
    </view>
  </view>
</template>
<script>
export default {
  name: 'sku-pkg',

  props: {
    packageList: {
      type: Array,
      default: () => []
    },
    pkgIndex: {
      type: Number,
      default: 0
    }
  },

  methods: {
    clickPackage(index) {
      this.$emit('change', index)
    }
  }
}
</script>
<style lang="less">
.sku-pkg{
  .pkg-list {
    // display: flex;
    flex-wrap: wrap;
    // max-height: 50%;

    .pkg-item {     
      .line-ellipsis;

      // min-width: 200rpx;
      height:64rpx;
      line-height: 64rpx;
      padding:0 20rpx;
      margin-right:20rpx;
      margin-top:20rpx;
      
      font-size:28rpx;
      color: @font_color;
      text-align: center;

      background: #ffffff;
      border: 1rpx solid #F1F4F9; 
      border-radius: 10rpx;
      box-sizing: border-box;       
      // &:nth-child(4n){
      //   margin-right:0 !important;
      // }
      &.active{
        color: @theme_color;
        border:1px solid @theme_color;
        background: fade(@theme_color, 5%);
      }
    }      
  }
}
</style>